<template>
  <div>



  <van-pull-refresh  offset="200">
  <van-list
    @load="onLoad"
    v-model:error="error"
  >
        <van-row >
        <van-col span="12" v-for="item in Cate2List" :key="item.id" >
      <!-- <div class="herd"><p class="name">{{item.category.frontName}}</p><p class="desc">{{item.category.frontDesc}}</p></div> -->

          <div class="goodGrid" @click="getlist">
        <ul class="list"  >
            <li class="item" style="z-index: 20;padding: 0rem 0.1rem 0.52rem 0.2rem" >
              <div class="tm-goodInGrid" >
          <div class="hd">
            <div class="wraper">
              <img class="tm-lazy-image tm-image-loaded" :src="item.listPicUrl">
            </div>
          </div>

          <div class="name">
            <img  class="preLogo" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png"  alt="" >
            {{item.name}}
          </div>

            <div class="newItemDesc"></div>
            <div></div>
            <div class="price">
              <span>
                <span>
                <span class="prefix"></span>
                    <span style="color: rgb(250, 30, 50); font-weight: bold;">
                      <span style="font-size: 0.24rem;">到手</span>
                      <span style="font-size: 0.24rem;">¥</span>
                      <span style="font-size: 20px;">{{item.retailPrice}}</span>
                    </span>
                <span class="suffix"></span>
              </span>
            <span style="color: rgb(153, 153, 153); font-weight: 300;  margin-left: 0.04rem;">
              
                <span style="font-size: 0.24rem;"><del>¥</del></span>
                <span style="font-size: 12px;"><del>{{item.sortOriginPrice}}</del></span>
        
              </span>
            </span>
          </div>
          
          <div class="banner-wrap">
            <div class="banner notice" >
            <!-- <img class="icon" alt="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png"> -->
            <div class="content">
              <div class="left" >
                <span class="prefix"  style="font-size: 0.2rem;">{{}}</span>
                <!-- <span class="yuan" style="font-size: 0.2rem;">¥</span> -->
                <span style="color: rgb(250, 30, 50); font-weight: bold;">
                  <!-- <span v-if="item.finalPriceInfoVO.banner.price"  style="font-size: 0.24rem; position: relative;top: -4px">{{item.finalPriceInfoVO.banner.price.price}}</span> -->
                </span>
                </div>
                
                  <div class="right"  v-if="item.finalPriceInfoVO.banner" style="font-size: 0.2rem;">{{ item.finalPriceInfoVO.banner.content }}
                </div>
               

                <!-- <div class="right" style="font-size: 1px;">满99减30元</div> -->
              </div>
            </div>
          </div>
          <img class="topLogo" src="https://yanxuan.nosdn.127.net/static-union/16698653574d07eb.png" alt="" style="width: 0.36rem; height: 0.36rem;">
            </div>
          </li>
          
        </ul>
        
          </div>
        </van-col>
          
      </van-row>
  </van-list>
</van-pull-refresh>
</div>
</template>

<script lang="ts" setup>
import { reqCate2List } from '@/APi/homelist';
import { onMounted, ref } from 'vue';
import { throttle }from 'lodash'
import router from '@/router';

const Cate2List = ref<any[]>([]) 
const category = ref<any[]>([])

const getlist =() =>{
  router.push({ path: '/goodsDetail' })
}

// const loading = ref(false);
// const finished = ref(false);
// const refreshing = ref(false);
const error = ref(false);
// const data = ref()

const onLoad = throttle(() => {
      
        // 请求方法
        getCate2ListInfo()

        
    },500);

  


// console.log(HopeList.value)
// 请求商品数据的方法
const getCate2ListInfo = async () =>{
  // console.log(111)
  const res = await reqCate2List(props.id)
  // console.log(222)
  // if(res.code === 200){
    
    // console.log(res.data)
    /* Cate2List.value = res.data.categoryItemList */
    const newarr=res.data.categoryItemList.map(item=>{
      return item.itemList
    })
    // console.log(newarr);
    
    newarr.forEach(item=>{
      Cate2List.value.push(...item)
    })
    // console.log(Cate2List.value)

    const a = 20

    Cate2List.value = [...Cate2List.value.slice(0,a),...Cate2List.value.slice(a,a+a)]
    // console.log(res.data.categoryItemList)
    // const newarr2=res.data.categoryItemList.map(item=>{
    //   return item.category
    // })
    // console.log(newarr2);
    // const {frontDesc} = newarr2.category
    // newarr2.forEach(item=>{
    //   category.value.push(...item)
    // })
    


  //  parmes.value.itemIdsStr = res.data.itemIdsStr
  
  //  console.log( frontDesc)
  }
// }

const props = defineProps<{id:number}>()


onMounted(()=>{
  // 调用方法
  getCate2ListInfo()
})
</script>



<script lang="ts">
export default {
  name: 'TypeNav',

  components:{
    
  }
  
}
</script>

<style lang="less" scoped>
.herd {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    height: 1.2rem;
    text-align: center;
    background-color: #fff;
}
.herd .name {
    line-height: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .32rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.herd .desc {
    margin-top: 0.16rem;
    color: #999;
    font-size: .24rem;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-align-items: center;
    line-height: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.goodGrid {
    background-color: #fff;
    
    // float: left;

}
.goodGrid .list {
    position: relative;
    z-index: 0;
    overflow: hidden;
    // width: 50%;
    // float: left;

}
.goodGrid .list .item {
    float: left;
    position: relative;
    // width: 50%;
    padding: 0 0.2rem 0.33rem;
    overflow: hidden;
    background-color: #fff;
}
.tm-goodInGrid {
    position: relative;
    // width: 50%;
}
.tm-goodInGrid .hd {
    border-radius: 0.16rem;
    position: relative;
    z-index: 0;
    background-color: #f4f4f4;
}
.tm-goodInGrid .wraper {
    position: relative;
    padding-bottom: 100%;
}
.tm-goodInGrid .hd .wraper img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.16rem;
    background-color: #f4f4f4;
}
.tm-goodInGrid .name {
    margin-top: 0.12rem;
    line-height: .55rem;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #12161c;
    font-family: PingFangSC-Regular;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
}
.tm-goodInGrid .preLogo {
    margin-right: 2px;
    vertical-align: -3PX;
    width: 15px;
    height: 15px;
}
.tm-goodInGrid .price {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.tm-goodInGrid .price .prefix, .tm-goodInGrid .price .suffix {
    font-size: .24rem;
    font-weight: 700;
    color: #fa1e32;
}
.tm-goodInGrid .banner-wrap {
    margin-top: 0.1rem;
}
.tm-goodInGrid .banner-wrap .notice {
    background-color: #ffe9eb;
}
.tm-goodInGrid .banner-wrap .banner .icon {
    position: absolute;
    top: -0.05rem;
    left: 0.36rem;
    width: 0.2rem;
    height: 0.06rem;
}
.tm-goodInGrid .banner-wrap .banner {
    position: relative;
    width: 100%;
    height: 0.46rem;
    border-radius: 1.2rem;
}
.tm-goodInGrid .banner-wrap .notice .content {
    position: absolute;
    left: 0.04rem;
    top: 0.04rem;
    height: 0.38rem;
}
.tm-goodInGrid .banner-wrap .notice .content .left {
    float: left;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 0.38rem;
    padding: 0 0.08rem;
    border-radius: 0.64rem;
    color: #fa1e32;
}
.tm-goodInGrid .banner-wrap .notice .content .right {
    font-weight: 600;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 0.38rem;
    margin-left: 0.08rem;
    color: #fa1e32;
}
// .tm-goodInGrid .banner-wrap .formal.bgRed .content .right {
//     background-color: #fa1e32;
//     color: #fff;
//     padding: 0.04rem 0.12rem;
//     margin-left: 0;
//     border-radius: 0.64rem;
// }
.tm-goodInGrid .topLogo {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
}
</style>
